<!--
 * @Descripttion: 部门权限管理
 * @Author: caijj
 * @Date: 2021-02-04 10:17:07
 * @LastEditors: caijj
 * @LastEditTime: 2021-03-01 08:47:25
-->
<template>
  <BasicLayout>
    <template #wrapper>
      <!-- 条件筛选区域 -->
      <div>
        <com-search :config-type="configForm" :span="4" :is-init-data="true" @submit="onSumbit">
          <el-button icon="el-icon-circle-plus-outline" type="success" @click="onAdd">新增部门</el-button>
        </com-search>
        <div class="spline" />
        <!-- 表格 -->
        <div class="table-container">
          <table-pagination
            ref="table"
            :max-height="800"
            :columns="columns"
            :data="tableData"
            :total="total"
            :current-page="current"
            :overflow-prop="['description']"
            border
            @handlePaginationChange="onPaginationChange"
          >
            <template slot="employeeCount" slot-scope="scope">
              <el-link
                type="primary"
                :underline="false"
                @click="onView(scope.item)"
              >{{ scope.item.employeeCount }}</el-link>
            </template>
            <template slot="operate" slot-scope="scope">
              <el-link
                type="primary"
                icon="el-icon-edit"
                :underline="false"
                @click="onEdit(scope.item)"
              >编辑</el-link>
              <el-link
                type="danger"
                icon="el-icon-delete"
                :underline="false"
                style="margin-left:10px;"
                @click="onDelete(scope.item)"
              >删除</el-link>
            </template>
          </table-pagination>
        </div>
        <template v-if="modalCfg.visible">
          <dialog-modal :modal-cfg="modalCfg">
            <ViewEmployee
              v-if="modalCfg.name==='view'"
              :department="editValue.id"
            />
            <edit-department
              v-else
              :cascader="configForm[0]"
              :init-val="editValue"
              @onClose="visable => (modalCfg.visible=visable)"
              @onSubmit="onHandleModal"
            />
          </dialog-modal>
        </template>
      </div>
    </template>
  </BasicLayout>
</template>
<script>
import TablePagination from '@/components/common/TablePagination';
import DialogModal from '@/components/common/DialogModal';
import ComSearch from '@/components/common/Comsearch';
import EditDepartment from './compontent/EditDepartment';
import ViewEmployee from './compontent/ViewEmployee';
import {
  getDepartmentTree,
  getDepartmentList,
  delDepartment,
  addDepartment,
  updateDepartment
} from '@/api/partRoleApi';
import Columns from './config';

export default {
  name: 'DepartmentManage',
  components: {
    TablePagination,
    EditDepartment,
    ViewEmployee,
    ComSearch,
    DialogModal
  },
  provide() {
    return {
      that: this
    };
  },
  data() {
    return {
      formData: {
        department: []
      },
      configForm: [
        {
          type: 'cascader',
          prop: 'father',
          props: {
            emitPath: false,
            checkStrictly: true,
            value: 'id',
            label: 'name',
            expandTrigger: 'click'
          },
          label: '部门',
          labelWidth: '40px',
          placeholder: '请选择部门',
          options: []
        }
      ],
      columns: Columns.departColumns,
      tableData: [],
      loading: false,
      total: 0,
      current: 1,
      father: '',
      modalCfg: {
        visible: false,
        title: '自定义标题',
        handlers: []
      },
      editValue: {}, // 编辑项
      userOptions: []
    };
  },
  created() {
    this.getDepartTree();
  },
  methods: {
    /* 获取部门列表 */
    getDepartTree() {
      getDepartmentTree().then(({ data = {}, resultCode } = {}) => {
        if (resultCode === '0000') {
          this.configForm[0].options = [data];
        }
      });
    },
    // 处理弹框新增、修改业务
    onHandleModal: async function({ fatherId, name = '', principals = [], description = '' }) {
      const tempArray = principals.map((userId) => ({ userId }));
      const params = {
        father: { id: fatherId },
        principals: tempArray,
        name,
        description
      };
      const { resultCode, data } =
          this.modalCfg.name === 'add'
            ? await addDepartment(params)
            : await updateDepartment({
              id: this.editValue.id,
              ...params
            });
      if (resultCode === '0000') this.$message.success(`部门${data}`);
      this.getList();
      this.getDepartTree();
      this.modalCfg.visible = false;
    },
    /* 编辑操作 */
    onEdit({ id, father, name, principals, description }) {
      this.editValue = {
        fatherId: father ? father.id : undefined,
        id,
        name,
        principals,
        description
      };
      this.modalCfg.visible = true;
      this.modalCfg.name = 'edit';
      this.modalCfg.title = '编辑部门';
    },
    /* 添加操作 */
    onAdd() {
      this.editValue = {};
      this.modalCfg.visible = true;
      this.modalCfg.name = 'add';
      this.modalCfg.title = '添加部门';
    },
    /* 查看操作 */
    onView({ id }) {
      this.editValue = { id };
      this.modalCfg.visible = true;
      this.modalCfg.name = 'view';
      this.modalCfg.title = '部门成员';
    },
    /* 删除操作 */
    onDelete(item) {
      const departmentId = item.id;
      this.$confirm(`是否确定删除部门：${item.name}？`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delDepartment(departmentId).then(({ resultCode, data }) => {
          if (resultCode === '0000') {
            this.$message.success('删除部门成功！');
            this.getList();
          } else {
            this.$message.error(data);
          }
        });
      });
    },
    /* 提交查询 */
    onSumbit({ father }) {
      this.father = father;
      this.getList({ father });
    },
    /* 分页查询 */
    onPaginationChange(page) {
      this.getList({ father: this.father, ...page });
    },
    /* 获取列表 */
    getList({ father = '', current: pageNo = 1, size: pageSize = 10 } = {}) {
      getDepartmentList({
        father,
        pageNo,
        pageSize
      }).then(({ data = {}, resultCode, current, total } = {}) => {
        if (resultCode === '0000') {
          this.tableData = data;
          this.current = current;
          this.total = total;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.card-box {
  position: relative;
  border-radius: 0px;
  border: none !important;
  .form-operate {
    display: block;
    float: right;
    .btn {
      display: inline-block;
    }
  }
}
.spline {
  width: 100%;
  height: 1px;
  position: absolute;
  background: #eee;
  left: 0;
}
.table-container {
  margin-top: 20px;
}
</style>
